<template>
	<Layout style="padding:0 24px 24px;height:100%;">
		<Breadcrumb style="margin:24px 0">
			<BreadcrumbItem>首页</BreadcrumbItem>
			<BreadcrumbItem>权限管理</BreadcrumbItem>
		</Breadcrumb>
		<Form inline>
			<ButtonGroup style="margin-right:24px;">
				<Button title="新增" icon="md-add" @click="editModal = true"></Button>
				<Button title="删除" :disabled="selection.length == 0" icon="md-trash" @click="removeBatch"></Button>
			</ButtonGroup>
			<FormItem><Input type="text" placeholder="权限编号" clearable v-model="pageRequest.condition.authCode" /></FormItem>
			<FormItem><Input type="text" placeholder="权限名称" clearable v-model="pageRequest.condition.authName" /></FormItem>
			<FormItem><Button type="primary" icon="ios-search" shape="circle" title="查询" @click="list"></Button></FormItem>
		</Form>
		<Content ref="content" style="padding:0px;background:#fff;height:100%">
			<Table :loading="loading" :columns="tableColumns" :data="pageData.content" :height="tableHeight" @on-selection-change="onSelectionChange" border>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="warning" size="small" style="margin-right: 5px" @click="modify(row)">修改</Button>
					<Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
					<Button type="primary" size="small" @click="openResModal(row)">资源分配</Button>
				</template>
				<template slot="footer">
					<Page style="margin-left:10px;" :total="pageData.total" :current="pageData.page" :page-size="15" @on-change="changePage"></Page>
				</template>
			</Table>
		</Content>
		<!-- 编辑对话框 -->
		<Modal :width="400" v-model="editModal" @on-visible-change="onVisibleChange" title="编辑权限信息" footer-hide>
			<Form ref="authForm" :model="authInfo" :label-width="80" :rules="authRules">
				<FormItem label="权限代码" prop="authCode"><Input v-model="authInfo.authCode" type="text" placeholder="请输入权限代码" /></FormItem>
				<FormItem label="权限名称" prop="authName"><Input v-model="authInfo.authName" type="text" placeholder="请输入权限名称" /></FormItem>
				<FormItem label="权限别名" prop="aliasName"><Input v-model="authInfo.aliasName" type="text" placeholder="请输入权限别名" /></FormItem>
				<FormItem label="附加信息" prop="addInfo"><Input v-model="authInfo.addInfo" type="text" placeholder="请输入附加信息" /></FormItem>
				<FormItem label="描述信息" prop="authDesc"><Input v-model="authInfo.authDesc" type="text" placeholder="请输入描述信息" /></FormItem>
				<FormItem label="权限类型" prop="authTypeCode">
					<Select v-model="authInfo.authTypeCode" placeholder="请选择权限类型">
						<Option v-for="item in authTypeOptions" :value="item.authTypeCode" :key="item.authTypeCode">{{ item.authTypeName }}</Option>
					</Select>
				</FormItem>
				<FormItem label="显示顺序" prop="sequence"><Input v-model="authInfo.sequence" type="number" placeholder="请输入序号" /></FormItem>
				<FormItem><Button type="primary" @click="save">保存</Button></FormItem>
			</Form>
		</Modal>
		<!-- 资源分配对话框 -->
		<Modal :width="400" v-model="resModal" title="资源分配" footer-hide>
			<div class="auth-list-content">
				<Select v-model="resSelection" multiple v-if="currentAuthInfo.authTypeCode == 'MENU'">
					<Option v-for="item in menuList" :value="item.id" :key="'menu_' + item.id">{{ item.menuName }}</Option>
				</Select>
				<Select v-model="resSelection" multiple v-if="currentAuthInfo.authTypeCode == 'ELEMENT'">
					<Option v-for="item in elemList" :value="item.id" :key="'elem_' + item.id">{{ item.elemName }}</Option>
				</Select>
				<Select v-model="resSelection" multiple v-if="currentAuthInfo.authTypeCode == 'RESOURCE'">
					<Option v-for="item in resList" :value="item.id" :key="'res_' + item.id">{{ item.resName }}</Option>
				</Select>
			</div>
			<Button type="primary" @click="saveAuthResource">确定</Button>
			<Button type="warning" @click="resModal = false" style="margin-left:5px;">取消</Button>
		</Modal>
	</Layout>
</template>

<script language="JavaScript">
export default {
	components: {},
	data() {
		return {
			tableHeight: 100, // 自适应表格高度
			loading: false, // 加载中
			tableColumns: [
				{
					type: 'selection',
					width: 80
				},
				{
					title: '权限代码',
					key: 'authCode',
					width: 'auto',
					minWidth: 250,
					resizable: true
				},
				{
					title: '权限名称',
					key: 'authName',
					width: 250,
					resizable: true
				},
				{
					title: '权限别名',
					key: 'aliasName',
					width: 250,
					resizable: true
				},
				{
					title: '附加信息',
					key: 'addInfo',
					width: 250,
					resizable: true
				},
				{
					title: '权限描述',
					key: 'authDesc',
					width: 250,
					resizable: true
				},
				{
					title: '权限类型',
					key: 'authTypeName',
					width: 250,
					resizable: true
				},
				{
					title: '序号',
					key: 'sequence',
					width: 100,
					resizable: true
				},
				{
					title: '操作',
					slot: 'action',
					fixed: 'right',
					width: 250
				}
			], // 表格列
			// 分页请求
			pageRequest: {
				page: 1,
				rows: 15,
				sort: 'sequence:asc',
				condition: {}
			},
			// 分页查询结果
			pageData: {
				page: 1,
				total: 2,
				content: [] // 表格数据
			},
			editModal: false, // 编辑对话框显示
			authInfo: {
				authCode: '',
				authName: '',
				aliasName: '',
				addInfo: '',
				authDesc: '',
				authTypeCode: '', // 权限类型
				sequence: 0
			}, // 保存信息
			authRules: {
				authCode: [
					{
						required: true,
						message: '必填'
					}
				],
				authName: [
					{
						required: true,
						message: '必填'
					}
				],
				authTypeCode: [
					{
						required: true,
						message: '必填'
					}
				],
				sequence: [
					{
						required: true,
						message: '必填'
					}
				]
			}, // 验证规则
			selection: [], //已选记录
			authTypeOptions: [
				{
					authTypeCode: 'MENU',
					authTypeName: '菜单权限'
				},
				{
					authTypeCode: 'ELEMENT',
					authTypeName: '元素权限'
				},
				{
					authTypeCode: 'RESOURCE',
					authTypeName: '资源权限'
				}
			],
			resModal: false, // 资源分配
			resSelection: [], // 相关资源(菜单、元素、资源)的ID
			menuList: [], // 菜单列表
			elemList: [], // 元素列表
			resList: [], // 相关资源列表
			currentAuthInfo: {} // 当前正在操作的权限信息
		};
	},
	computed: {},
	watch: {
		'authInfo.authCode': function() {
			this.authInfo.authCode = this.authInfo.authCode.toUpperCase();
		},
		resSelection: function() {
			// console.log(this.resSelection);
		}
	},
	created: function() {},
	mounted: function() {
		this.$nextTick(() => {
			this.tableHeight = this.$refs.content.$el.clientHeight;
			this.list();
			this.getResList();
		});
	},
	methods: {
		// 保存
		save: function() {
			this.$refs['authForm'].validate(valid => {
				if (valid) {
					this.$request.post(
						'/admin/sys/auth/save',
						this.authInfo,
						res => {
							this.editModal = false;
							this.list();
						},
						true,
						true
					);
				}
			});
		},
		// 获取列表
		list: function() {
			this.$request.post(
				'/admin/sys/auth/list',
				this.pageRequest,
				res => {
					this.pageData = res.data || this.pageData;
				},
				false,
				false
			);
		},
		// 修改
		modify: function(row) {
			this.editModal = true;
			this.$nextTick(() => {
				this.authInfo = Object.assign({}, row);
			});
		},
		// 删除
		remove: function(row) {
			this.$Modal.confirm({
				title: '确认？',
				content: '删除后不可恢复，是否继续？',
				onOk: () => {
					this.$request.post(
						'/admin/sys/auth/deleteById',
						row,
						res => {
							this.list();
						},
						true,
						true
					);
				}
			});
		},
		// 批量删除
		removeBatch: function() {
			let ids = this.$utils.getPropertyArrayFromObjectArray(this.selection, 'id');
			if (!ids || ids.length == 0) {
				this.$Message.warning('请选择权限');
				return;
			}
			this.$Modal.confirm({
				title: '确认？',
				content: '删除后不可恢复，是否继续？',
				onOk: () => {
					this.$request.post(
						'/admin/sys/auth/deleteBatch',
						ids,
						res => {
							this.list();
						},
						true,
						true
					);
				}
			});
		},
		// 关闭对话框
		onVisibleChange: function() {
			this.$refs['authForm'].resetFields();
			this.authInfo.id = '';
		},
		// 表格多选事件
		onSelectionChange: function(sel) {
			this.selection = sel;
		},
		// 分页
		changePage: function(page) {
			this.pageRequest.page = page;
			this.list();
		},
		// 获取相关列表
		getResList: function() {
			// 菜单列表
			this.$request.post(
				'/admin/sys/menu/list',
				{
					page: 1,
					rows: 99999,
					sort: 'sequence:asc'
				},
				res => {
					this.menuList = (res.data || {}).content || [];
				},
				false,
				false
			);
			// 元素列表
			this.$request.post(
				'/admin/sys/elem/list',
				{
					page: 1,
					rows: 99999,
					sort: 'sequence:asc'
				},
				res => {
					this.elemList = (res.data || {}).content || [];
				},
				false,
				false
			);
			// 资源列表
			this.$request.post(
				'/admin/sys/res/list',
				{
					page: 1,
					rows: 99999,
					sort: 'sequence:asc'
				},
				res => {
					this.resList = (res.data || {}).content || [];
				},
				false,
				false
			);
		},
		// 打开资源分配对话框
		openResModal: function(row) {
			this.resSelection = [];
			this.$request.get(
				`/admin/sys/auth-resource/getResIds/${row.id}`,
				{},
				res => {
					this.resSelection = res.data || [];
				},
				false,
				false
			);
			this.resModal = true;
			this.currentAuthInfo = row;
		},
		// 保存权限与相关信息的关系
		saveAuthResource: function() {
			let authResInfo = {
				authId: this.currentAuthInfo.id,
				resourceIds: this.resSelection
			};
			this.$Modal.confirm({
				title: '确认？',
				content: '确认修改权限资源？',
				onOk: () => {
					this.$request.post(
						'/admin/sys/auth-resource/save',
						authResInfo,
						res => {
							this.resModal = false;
						},
						true,
						true
					);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped="scoped">
.auth-list-content {
	height: 450px;
	overflow-y: auto;
}
</style>
